<template>
  <div class="equip-wrap-common">
    <CustomTabs :tabList="tabList" :activeName="activeName" @tabSelect="handelTabSelected" />
    <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" inline label-position="right" label-width="80px">
      <px-row :gutter="12">
        <px-col :span="6">
          <px-form-item label="点位名称">
            <px-input v-model="queryParams.point" placeholder="请输入点位名称进行搜索" autocomplete="off" clearable @keyup.enter="queryTable">
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <EquipClassSelect :className="queryParams.className" @changeClassName="changeClassName" @clear="clear" />
        </px-col>
        <px-col :span="6">
          <EquipSystemTree
            :facCode="queryParams.facCode"
            :className="queryParams.className"
            :systemCode="queryParams.systemId"
            @changeAllSystemCodes="changeAllSystemCodes"
            @changeSystemCodes="changeSystemCodes"
            @clearSystem="clearSystem"
          />
        </px-col>
        <px-col :span="6">
          <px-form-item label="位置" prop="positionCodeList">
            <px-cascader
              ref="cascaderRef"
              v-model="queryParams.positionCodeList"
              filterable
              clearable
              style="width: 100%"
              :options="positionList"
              :props="defaultProps"
              placeholder="请选择位置"
              @change="cascaderRef.togglePopperVisible()"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="报警级别" prop="alarmLevel">
            <px-select v-model="queryParams.alarmLevel" placeholder="请选择报警级别" clearable filterable>
              <px-option v-for="item in filterLevelList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="报警类型" prop="alarmType">
            <px-select v-model="queryParams.alarmType" placeholder="请选择报警类型" clearable filterable>
              <px-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="报警日期" prop="time">
            <px-date-picker
              v-model="queryParams.time"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
          <px-button v-has="'ALL_ALERT_ALL_ACK'" type="primary" @click="handleAllAck">一键确认</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" height="calc(100vh - 343px)" border>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template v-if="item.type === 'level'" #default="scope">
          <px-tag style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]"> {{ scope.row.alarmLevel }} </px-tag>
        </template>
        <template v-else-if="item.type === 'pos'" #default="scope">
          <span style="color: #3b82f6; cursor: pointer" @click="handleVisual(scope.row)">
            <px-icon><Location /></px-icon>{{ scope.row.twinName }}
          </span>
        </template>
        <template v-else-if="item.type === 'status'" #default="scope">
          <div v-if="scope.row.alarmStatus === 'OFF'">
            <px-tooltip effect="light" :content="`关闭时间：${scope.row.alarmEndTime}`">
              <px-tag type="info">已关闭</px-tag>
            </px-tooltip>
          </div>
          <px-tag v-else type="danger">报警中</px-tag>
        </template>
        <template v-else-if="item.type === 'remark'" #default="scope">
          <div style="display: flex">
            <px-text class="w-200px" truncated>{{ scope.row.remarkDTO?.remark || "-" }}</px-text>
            <px-button type="primary" link icon="EditPen" @click="handleAddRemark(scope.row)" />
          </div>
        </template>
        <template v-else #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column v-if="activeName === 'DONE'" #default="scope" showOverflowTooltip min-width="120" label="报警持续时间">
        {{ scope.row.alarmDurationTime }}
      </px-table-column>
      <px-table-column label="操作" min-width="180px" align="center" fixed="right">
        <template #default="scope">
          <px-button v-if="scope.row.alarmAckStatus !== 'DONE'" v-has="'ALL_ALERT_ACK'" link type="primary" @click="handleAck(scope.row)">
            确认
          </px-button>
          <px-tooltip effect="light">
            <template #content>
              <p>确认人：{{ scope.row.alarmAckUser }}</p>
              <p>确认时间：{{ scope.row.alarmAckTime }}</p>
            </template>
            <px-button v-if="scope.row.alarmAckStatus === 'DONE'" size="small" type="primary" link disabled>已确认</px-button>
          </px-tooltip>
          <px-dropdown>
            <span class="px-dropdown-link">关联项</span>
            <template #dropdown>
              <px-dropdown-menu>
                <px-dropdown-item>
                  <px-button v-if="activeName !== 'ALL'" v-has="'ALL_ALERT_HISTORY'" link type="primary" @click="handleToHistory(scope.row)">
                    报警历史
                  </px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_VIDEO'" link type="primary" @click="handleVisual(scope.row, 1)">摄像头</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_SOP'" link type="primary" @click="handleSOP(scope.row)">SOP</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_SPEC'" link type="primary" @click="handleTargetMatrix(scope.row)">指标联动</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_VISUAL'" link type="primary" @click="handleVisual(scope.row)">可视化</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_DEFEAT'" link type="primary" :disabled="scope.row.missingId" @click="handleToDefeat(scope.row)">
                    转缺失
                  </px-button>
                </px-dropdown-item>
              </px-dropdown-menu>
            </template>
          </px-dropdown>
          <px-dropdown>
            <span class="px-dropdown-link">设置</span>
            <template #dropdown>
              <px-dropdown-menu>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_SHIELD'" link type="primary" @click="handleShield(scope.row)">屏蔽</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_SHIELD'" link type="primary" @click="handleDown(scope.row)">下线</px-button>
                </px-dropdown-item>
                <px-dropdown-item>
                  <px-button v-has="'ALL_ALERT_SHIELD'" link type="primary" @click="handleEdit(scope.row)">编辑点位</px-button>
                </px-dropdown-item>
              </px-dropdown-menu>
            </template>
          </px-dropdown>
        </template>
      </px-table-column>
    </px-table>

    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      :total="total"
      class="equip-table-pagination"
      @pagination="queryTable"
    />

    <px-dialog v-model="dialogFormVisible" destroy-on-close title="备注信息" @close="handelCancel">
      <px-form ref="formRef" :model="form" label-position="right" :rules="rules">
        <px-form-item label="" prop="remark">
          <px-input
            v-model="form.remark"
            type="textarea"
            placeholder="请输入备注信息"
            clearable
            :autosize="{ minRows: 2, maxRows: 5 }"
            maxlength="1000"
            show-word-limit
          />
        </px-form-item>
      </px-form>
      <CustomTabs :tabList="remarkTabList" :activeName="current" @tabSelect="handelRemarkTabSelected" />
      <px-timeline style="margin-top: 20px">
        <px-timeline-item v-for="(item, index) in remarkList" :key="index" :timestamp="item.updateTime" placement="top">
          <div class="alarm_remark_list">
            <div>
              <span style="word-break: break-all">{{ item.remark }}</span>
              <p>{{ item.accountName }}</p>
            </div>
            <px-icon v-if="item.accountName?.includes(userInfo.empNo)" color="#FF771E" @click="handleDeleteRemark(item)"><Delete /></px-icon>
          </div>
          <!-- <div class="desc">
            <span class="btn" :style="{ color: spreadIndex.indexOf(index) != -1 ? '#0195ff' : '#999999' }" @click="spread(index)">{{
              spreadIndex.indexOf(index) != -1 ? "收起" : "展开"
            }}</span>
            <i
              :class="spreadIndex.indexOf(index) != -1 ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"
              :style="{ color: spreadIndex.indexOf(index) != -1 ? '#0195ff' : '#999999' }"
            />
            <div v-show="spreadIndex.indexOf(index) != -1" class="content">
              <p>{{ item.remark }}</p>
              <p>{{ item.accountName }}</p>
            </div>
          </div> -->
        </px-timeline-item>
      </px-timeline>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="handelCancel">取消</px-button>
          <px-button type="primary" @click="handleSubmit(formRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
    <px-dialog v-model="isDownShow" width="1200px" destroy-on-close title="报警下线" @close="isDownShow = false">
      <div class="view-equip-detail">
        <div class="view-equip-wrap">
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">报警点位</div>
              <div class="text">{{ downData.point }}</div>
            </div>
            <div class="view-equip-item">
              <div class="label">报警级别</div>
              <div class="text">
                <px-tag style="color: #fff" round :color="tagBgColorList[downData.alarmLevel]"> {{ downData.alarmLevel }} </px-tag>
              </div>
            </div>
            <div class="view-equip-item">
              <div class="label">报警类型</div>
              <div class="text">{{ downData.alarmType }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item">
              <div class="label">科室</div>
              <div class="text">{{ downData.classNameDesc }}</div>
            </div>
            <div class="view-equip-item large">
              <div class="label">报警内容</div>
              <div class="text">{{ downData.alarmContent }}</div>
            </div>
          </div>
        </div>
      </div>
      <px-form ref="downRef" :model="downForm" label-position="right">
        <px-form-item label="下线规则" prop="ruleId" :rules="[{ required: true, message: '请选择下线规则', trigger: 'blur' }]">
          <px-select v-model="downForm.ruleId" style="width: 100%" placeholder="请选择下线规则" clearable filterable>
            <px-option v-for="item in rulesList" :key="item.id" :label="item.ruleName" :value="item.id" />
          </px-select>
        </px-form-item>
      </px-form>
      <template #footer>
        <span class="dialog-footer">
          <px-button @click="isDownShow = false">取消</px-button>
          <px-button type="primary" @click="handleDownSubmit(downRef)"> 确定 </px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  addRemarkApi,
  addShieldRuleByPerson,
  delRemarkApi,
  downPoint,
  getRemarkHistoryApi,
  handleAckApi,
  queryAlarmCount,
  queryById,
  queryShieldRulesListApi
} from "@/api/alert";
import { queryDictData } from "@/api/common";
import { getTableData } from "@/api/system/positionManage";
import CustomTabs from "@/components/Tabs/index.vue";
import EquipClassSelect from "@/views/all/equip/components/EquipClassSelect.vue";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";

defineOptions({
  name: "ALL_ALERT_BUSINESS"
});

const route = useRoute();
const router = useRouter();
const cascaderRef = ref();
const defaultProps = {
  children: "children",
  label: "name",
  value: "code",
  checkStrictly: true
};

const sum = ref(0);
const formRef = ref();
const downRef = ref();
const remarkList = ref([]);
const current = ref("current");
const userInfo = ref<Record<string, any>>({});
const systemIdList = ref([]);

const remarkTabList = ref([
  { name: "current", label: "当前报警备注" },
  { name: "history", label: "点位历史备注" }
]);

const handleDeleteRemark = async item => {
  const res = await delRemarkApi({ id: item.id, status: "INVALID" });
  if (res) {
    PxMessage.success("删除成功");
    getRemarkList(current.value === "current" ? { alarmId: rowData.value.alarmId } : { point: rowData.value.point });
  }
};

const getUndoCount = async () => {
  const res: any = await queryAlarmCount({ alarmCenterFlag: "YES" });
  sum.value = res?.undoNumber || 0;
  tabList.value = [
    { name: "UNDO", label: `当前报警（${sum.value}）` },
    { name: "DONE", label: "历史报警" },
    { name: "ALL", label: "全部报警" }
  ];
};

// 科室组件调用父组件
const changeClassName = val => {
  queryParams.value.className = val;
  queryParams.value.systemId = "";
  queryParams.value.alarmType = "";
  systemIdList.value = [];
  getTypeList();
};

const clear = val => {
  console.log("清楚");
};

// const getEnum = async () => {
//   const res: any = await queryAlarmEnum();
//   alarmTypeList.value = Object.keys(res.ALARM_TYPE).map((item, index) => ({
//     id: index + 1,
//     value: item,
//     label: res.ALARM_TYPE[item]
//   }));
// };

// 进入页面时触发
onMounted(async () => {
  const { point, alarmType, alarmLevel, alarmTime, active, className, startTime, endTime, systemCode, positionCode } = route.query;
  // 四科跳转至对应的tab
  queryParams.value.className = className;
  queryParams.value.startTime = startTime;
  queryParams.value.endTime = endTime;
  queryParams.value.time = [startTime || "", endTime || ""];
  queryParams.value.point = point || "";
  queryParams.value.alarmType = alarmType;
  queryParams.value.alarmLevel = alarmLevel;
  queryParams.value.systemId = systemCode;
  queryParams.value.positionCodeList = positionCode;
  if (active) {
    activeName.value = active;
  }
  if (point) {
    queryParams.value.startTime = alarmTime;
    queryParams.value.endTime = alarmTime;
    queryParams.value.time = [alarmTime, alarmTime];
  }
  userInfo.value = JSON.parse(localStorage.getItem("userInfo"));
  filterLevelList.value = await queryDictData({ typeCode: "ALARM_LEVEL" });
  // getEnum();
  const key = route.query.active;
  activeName.value = key || "UNDO";
  queryTable();
  getUndoCount();
  positionList.value = await getTableData({});
  getTypeList();
});

const getTypeList = async () => {
  if (queryParams.value.className) {
    alarmTypeList.value = await queryDictData({ typeCode: `${queryParams.value.className}_ALARM_TYPE` });
  } else {
    const classNameList = JSON.parse(localStorage.getItem("classList"));
    classNameList?.map(async item => {
      const res = await queryDictData({ typeCode: `${item.code}_ALARM_TYPE` });
      if (res) {
        alarmTypeList.value = alarmTypeList.value.concat(res);
      }
      alarmTypeList.value = alarmTypeList.value?.filter((obj, index, self) => {
        return self.map(x => x.value).indexOf(obj.value) === index;
      });
    });
  }
};

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

const data = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  activeName: "UNDO",
  tableData: [],
  total: 0,
  rowData: "", // 行数据
  form: {},
  downForm: {},
  dialogFormVisible: false,
  rules: {
    remark: [{ required: true, message: "请输入备注内容", trigger: ["blur", "change"] }]
  },
  filterLevelList: [], // 报警
  alarmTypeList: [],
  tableColumns: [
    { prop: "alarmLevel", label: "级别", minWidth: "90", type: "level", showOverflowTooltip: true, fixed: "left" },
    { prop: "alarmTime", label: "发生时间", minWidth: "150", showOverflowTooltip: true },
    { prop: "point", label: "报警点位", minWidth: "200", showOverflowTooltip: true },
    { prop: "alarmContent", label: "报警内容", minWidth: "180", showOverflowTooltip: true },
    { prop: "alarmType", label: "报警类型", minWidth: "80", showOverflowTooltip: true },
    { prop: "classNameDesc", label: "科室", minWidth: "70", showOverflowTooltip: true },
    { prop: "systemName", label: "系统", minWidth: "100", showOverflowTooltip: true },
    { prop: "position", label: "所属设备", minWidth: "130", type: "pos", showOverflowTooltip: true },
    // { prop: "twinName", label: "所属设备名称", minWidth: "120", showOverflowTooltip: true },
    // { prop: "realityValue", label: "实际值", minWidth: "100", showOverflowTooltip: true },
    // { prop: "settingValue", label: "设定值", minWidth: "100", showOverflowTooltip: true },
    { prop: "alarmAckStatus", label: "报警状态", minWidth: "80", type: "status", showOverflowTooltip: true },
    { prop: "remark", label: "备注", minWidth: "180", type: "remark" }
  ],
  spreadIndex: [],
  tabList: [],
  positionList: [],
  isDownShow: false,
  downData: {},
  rulesList: []
});

const {
  queryParams,
  tableData,
  total,
  dialogFormVisible,
  form,
  downForm,
  rules,
  rowData,
  filterLevelList,
  alarmTypeList,
  tableColumns,
  spreadIndex,
  activeName,
  tabList,
  positionList,
  isDownShow,
  downData,
  rulesList
} = toRefs(data);

const handelTabSelected = tab => {
  activeName.value = tab;
  queryTable();
};

const spread = index => {
  if (spreadIndex.value.indexOf(index) == -1) {
    spreadIndex.value.push(index);
  } else {
    spreadIndex.value = spreadIndex.value.filter(item => item != index);
  }
};

const getRuleList = async () => {
  const res = await queryShieldRulesListApi({ pageNum: 1, pageSize: 999, className: downData.value.className, enableStatus: "ON" });
  rulesList.value = res?.data;
};

const handleDown = row => {
  isDownShow.value = true;
  downData.value = row;
  getRuleList();
};

const handleDownSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      await downPoint({ ruleId: downForm.value.ruleId, point: downData.value.point });
      PxMessage.success("下线成功");
      downRef.value.resetFields();
      isDownShow.value = false;
      downData.value = {};
      queryTable();
    }
  });
};

const handleEdit = row => {
  router.push(`/all/alert/rules?tab=point&point=${row.point}`);
};

const queryTable = async () => {
  const { time, positionCodeList, startTime, endTime } = queryParams.value;
  const data = await queryById({
    ...queryParams.value,
    startTime: startTime ? startTime : time && time[0] ? `${time[0]} 00:00:00` : "",
    endTime: endTime ? endTime : time && time[1] ? `${time[1]} 23:59:59` : "",
    alarmStatus: activeName.value === "UNDO" ? ["ACK", "ON"] : activeName.value === "DONE" ? ["OFF"] : ["ACK", "ON", "OFF"],
    alarmCenterFlag: "YES",
    systemIdList: systemIdList.value,
    positionCodeList: Array.isArray(positionCodeList) ? [positionCodeList[positionCodeList?.length - 1]] : positionCodeList ? [positionCodeList] : []
  });
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置筛选条件
const resetTable = async () => {
  queryParams.value = {
    alarmContent: "",
    className: "",
    time: [],
    pageNum: 1,
    pageSize: 20
  };
  systemIdList.value = [];
  getTypeList();
  queryTable();
};

const handleAllAck = async () => {
  const res = await handleAckApi({
    alarmStatus: "ACK",
    alarmType: activeName.value === "UNDO" ? "CURRENT" : activeName.value === "DONE" ? "HISTORY" : ""
  });
  if (res) {
    PxMessage.success("一键确认成功");
    queryTable();
  }
};

// ack
const handleAck = async row => {
  try {
    const res = await handleAckApi({
      alarmId: row.alarmId,
      alarmStatus: "ACK"
    });
    if (res) {
      PxMessage.success("确认成功");
      queryTable();
    }
  } catch (error) {
    console.log(error);
  }
};

const handleSOP = row => {
  if (row.twinId) {
    router.push(`/all/equip/archive/list?eqpId=${row.twinId}&tab=sop`);
  } else {
    router.push(`/all/knowledge/documentManage`);
  }
};

const handleTargetMatrix = row => {
  PxMessage.info("功能点正在开发中~");
};

const handleVisual = (row, type?: number) => {
  let { twinId, visualizationRoomId, visualizationAlarmFlag } = row;
  if (type === 1) {
    if (visualizationAlarmFlag === "YES" && visualizationRoomId) {
      router.push(`/all/visual/template?compEmitData=${visualizationRoomId}&type=ROOM`);
    } else {
      PxMessage.info("可视化中无此位置信息");
      return;
    }
  } else {
    if (visualizationAlarmFlag === "YES" && twinId) {
      router.push(`/all/visual/template?compEmitData=${twinId}`);
    } else {
      PxMessage.info("可视化中无此设备信息");
      return;
    }
  }
};

// 跳转到报警历史
const handleToHistory = row => {
  activeName.value = "ALL";
  queryParams.value.point = row.point;
  queryTable();
};

// 报警转缺失
const handleToDefeat = row => {
  router.push(`/all/safeManage/defect?id=${row.alarmId}&source=alarm`);
};

const getRemarkList = async params => {
  const res = await getRemarkHistoryApi(params);
  remarkList.value = res.data;
};

// 打开备注弹窗并获取历史备注
const handleAddRemark = row => {
  rowData.value = row;
  dialogFormVisible.value = true;
  getRemarkList({ alarmId: row.alarmId });
};

const handelRemarkTabSelected = selectName => {
  current.value = selectName;
  getRemarkList(selectName === "current" ? { alarmId: rowData.value.alarmId } : { point: rowData.value.point });
};

const handelCancel = () => {
  reset();
  dialogFormVisible.value = false;
  queryTable();
};

/** 表单重置 */
function reset() {
  form.value = {
    remark: ""
  };
  current.value = "current";
  rowData.value = "";
}

const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      const { point, alarmId } = rowData.value;
      await addRemarkApi({ alarmId, point, ...form.value, accountName: userInfo.value?.username });
      PxMessage.success("添加备注成功");
      handelCancel();
    }
  });
};

// 个人报警屏蔽
const handleShield = async row => {
  PxMessageBox.confirm(`确认要屏蔽该点位的报警吗？`, "提示", {
    confirmButtonText: "屏蔽",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const { twinName, factoryName, point } = row;
      await addShieldRuleByPerson({
        pointPosition: twinName,
        factoryName,
        point
      });
      PxMessage.success("屏蔽成功");
      queryTable();
    })
    .catch(() => {});
};

// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  queryParams.value.systemId = val;
  systemIdList.value = val2;
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  queryParams.value.facCode = val;
  queryParams.value.className = val2;
  queryParams.value.systemId = val3;
  systemIdList.value = val4;
};
// 系统组件值改变触发
const clearSystem = val => {
  queryParams.value.systemId = "";
  systemIdList.value = [];
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
@import url("@/views/all/equip/scss/view-detail.scss");
.view-equip-detail {
  height: auto;
}

.equip-wrap-common .equip-form {
  padding-top: 12px;
}
.custom-form-ui .px-form-item {
  width: 100%;
}
:deep(.px-button.is-link) {
  padding-top: 0;
}
:deep(.px-table .px-dropdown, .px-icon-arrow-down) {
  font-size: 14px;
  // line-height: 36px;
  // height: 36px;
  padding-top: 12px;
}
:deep(.px-table .px-dropdown-link) {
  outline: none !important;
}
.alarm_remark_list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
</style>
